<template>
  <div class="threeBox">
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// import './style.css'
import * as THREE from 'three'

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min"
onMounted(() => {
  const scene = new THREE.Scene()
  const creama = new THREE.PerspectiveCamera(
    45, //视角
    1920 / 923, //宽高比
    0.1, //近平面
    10000 //远平面
  )
  const render = new THREE.WebGLRenderer()
  render.setSize(1920, 923)
  document.querySelector('.threeBox').appendChild(render.domElement)
  // document.body.appendChild(render.domElement)

  // 创建一个立方体
  const geomary = new THREE.BoxGeometry(1, 1, 1)
  // 创建材质
  const materal = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  // materal.wireframe = false
  // 创建网格
  const cube = new THREE.Mesh(geomary, materal)
  // 将网格加入到场景中
  scene.add(cube)
  cube.scale.set(2, 2, 2)
  // 设置相机的位置
  // creama.position.z = 10
  creama.position.set(0, 5, 10)
  creama.lookAt(0, 0, 0)
  // 设置全屏按钮
  let eventObj = {
    FullScreen: function () {
      document.body.requestFullscreen()
    },
    exitFullscreen: function () {
      document.exitFullscreen()
    }
  }
  const gui = new GUI()
  gui.add(eventObj, 'FullScreen').name('全屏')
  gui.add(eventObj, 'exitFullscreen').name('退出全屏')

  //控制立方体位置
  // gui.add(cube.position, "x", -5, 5).name('立方体X轴位置')
  // gui.add(cube.position, "y", -5, 5).name('立方体y轴位置')
  // gui.add(cube.position, "z", -5, 5).name('立方体z轴位置')
  // 控制立方体位置，控制步长
  // gui.add(cube.position, "x").min(-10).max(10).step(1).name('立方体X轴位置')
  // gui.add(cube.position, "y").min(-10).max(10).step(1).name('立方体Y轴位置')
  // gui.add(cube.position, "z").min(-10).max(10).step(1).name('立方体Z轴位置')
  // 通过文件夹来添加，控制立方体位置，控制步长
  let folder = gui.addFolder('立方体位置')
  folder
    .add(cube.position, "x")
    .min(-10)
    .max(10)
    .step(1)
    .name('立方体X轴位置')
    .onChange((val) => {
      console.log(val)
    })

  folder.add(cube.position, "y")
    .min(-10)
    .max(10)
    .step(1)
    .name('立方体Y轴位置')
    .onFinishChange((val) => {
      console.log(val)
    })
  folder.add(cube.position, "z").min(-10).max(10).step(1).name('立方体Z轴位置')

  // 布尔值控制线框模式
  gui.add(materal, 'wireframe').name('线框模式')
  // 设置颜色
  let colorPrams = {
    cubeColor: '0x00ff00'
  }
  gui.addColor(colorPrams, 'cubeColor').name('立方体颜色')
    .onChange((val) => {
      cube.material.color.set(val)
    })
  // 创建轨道控制器
  const controls = new OrbitControls(creama, render.domElement)
  // 设置带阻尼
  controls.enableDamping = true
  // 设置带阻尼的系数
  controls.dampingFactor = 0.05 //数字越小，滑动后的惯性时间越长
  //设置自动旋转
  controls.autoRotate = false
  //设置旋转的速度
  controls.autoRotateSpeed = 5
  // 添加坐标轴辅助器
  const axesHelper = new THREE.AxesHelper(5)
  scene.add(axesHelper)
  const dir = new THREE.Vector3(1, 2, 1) //箭头方向
  dir.normalize()
  const origin = new THREE.Vector3(0, 0, 0) //箭头原点位置
  const length = 3
  const hex = 0xffff00
  const arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex)
  // scene.add(arrowHelper)
  function animate () {
    requestAnimationFrame(animate)
    // cube.position.x += 0.01
    // cube.rotation.x += 0.01
    // if (cube.position.x > 5) {
    //   cube.position.x = 0
    // }
    controls.update()
    // cube.rotation.x += 0.01
    // cube.rotation.y += 0.01
    render.render(scene, creama)
  }
  animate()
  window.addEventListener('resize', () => {
    creama.aspect = window.innerWidth / window.innerHeight
    creama.updateProjectionMatrix()
    render.setSize(window.innerWidth, window.innerHeight)
    render.setPixelRatio(window.devicePixelRatio)
  })

  window.addEventListener("dblclick", () => {
    const fullScreenElement = document.fullscreenElement
    console.log(fullScreenElement, 123)
    if (!fullScreenElement) {
      //   双击控制屏幕进入全屏，退出全屏
      // 让画布对象全屏
      render.domElement.requestFullscreen()
    } else {
      //   退出全屏，使用document对象
      document.exitFullscreen()
    }
  })
})

</script>

<style scoped
  lang="scss">
  .threeBox {
    width: 1920px;
    height: 923px;
  }
</style>
